<template>
    <div id="userList">
        <header>
            <div class="P_date">
                <span>时间：</span>
                <gDate @faithDate="faithDate"></gDate>
            </div>
            <div class="P_type">
                <div class="Choice">
                    <el-form ref="form">
                        <el-form-item label="活动区域">
                            <el-select v-model="form.selectedOptions" placeholder="请选择活动区域" @change="handleChange">
                                <el-option label='全部小程序' value='' >全部小程序</el-option>
                                <el-option :label=item.appname :value=item.appid v-for="(item,index) in form.programList" :key="index"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-button @click="search">搜索</el-button>
                    </el-form>
                </div>
            </div>
        </header>
        <main>
            <el-table :data="tableData" border style="width: 100%" stripe>
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="nickname" label="用户名称"></el-table-column>
                <el-table-column prop="gender" label="性别"></el-table-column>
                <el-table-column prop="province" label="城市"></el-table-column>
                <el-table-column prop="createtime" label="授权时间"></el-table-column>
            </el-table>
            <div class="currPage">
                <el-pagination
                    layout="prev, pager, next"
                    :page-size=pageSize
                    :current-page=currentPage
                    @current-change="handleCurrentChange"
                    :total=total>
                </el-pagination>
            </div>
        </main>
    </div>
</template>
<script>
import gDate from '../G_Date/gdate'
export default {
    data(){
        return {
            form:{
                id:"",
                selectedOptions:'',//下拉内容
                programList:[]//小程序列表
            },
            currentPage:1,//分页
            tableData:[],
            pageSize:2,
            total:0,
            obj:{}//时间选择器
        }
    },
    components:{
        gDate:gDate
    },
    mounted(){
        this.operateList()
        this.CurrData()
        
    },
    methods:{
        handleCurrentChange:function(page){//分页按钮
            this.CurrData(page)
        },
        search:function(){//搜索
        this.currentPage = 1
            this.CurrData()
            // console.log(this.form.selectedOptions)
        },
        faithDate:function(e){//时间组件
            this.obj.startTime = e[0]
            this.obj.endTime = e[1]
        },
        handleChange:function(e){//change小程序下拉
            this.form.id = e
        },
        operateList:function(){//获取小程序列表
            let url = 'program/selectProgram'
            let data = {}
            this.$axios.getAddressJson(url,data)
            .then(res=>{
                this.form.programList = res.data.data
            })
            .catch(res=>{
                // console.log(res)
            })
        },
        CurrData:function(page){
            let url = 'user/userList'
            let data = {
                appid:this.form.id && this.form.id!=''?this.form.id:'',
                startTime:this.obj.startTime ? this.obj.startTime : '',
                endTime:this.obj.endTime ? this.obj.endTime : '',
                appname:this.obj.appname ? this.obj.appname : '',
                page: page && typeof page != undefined ? page : this.currentPage
            }
            this.$axios.getAddressJson(url,data)
            .then(res=>{
                
                this.total =  res.data.pages*2
                this.tableData = res.data.data
                this.tableData.map((item,index)=>{
                    this.tableData[index].gender == 1 ? this.tableData[index].gender = '男' : ( this.tableData[index].gender == 2 ? this.tableData[index].gender = '女' : this.tableData[index].gender = '未知')
                })
                
                // console.log(this.tableData)
            })
            .catch(res=>{
                // console.log(res)
            })
        }
    }
}
</script>
<style>
    #userList header{
        width: 100%;
        border-bottom: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        padding: 20px;
        box-sizing: border-box;
        position: relative;
    }
    .P_date{
        display: flex;
        line-height: 40px;
    }
    .P_type{
        /* margin-top: 20px; */
       
        line-height: 40px;
    }
    .P_type .el-form{
        display: flex;
    }
    .P_type .el-form-item{
        display: flex;
        /* width: 300px; */
        margin-right: 10px;
    }
    .currPage {
        position: relative;
    }
    .currPage .el-pagination{
        position: absolute;
        right: 20px;
        top: 20px;
    }
</style>


